<template>
  <div class="div">
    <a-row class="row">
      <a-col span="4" class="textone">旧密码</a-col>
      <a-col span="12">
        <a-col span="20">
          <input
            v-model="oldpossword"
            type="password"
            placeholder="输入旧密码"
            class="input"
            id="oldpsd"
            @click="change2('oldpsd')"
            @blur="back2('oldpsd')"
          />
        </a-col>
        <a-col span="4">
          <a-button
            :style="style"
            :icon="icon"
            :loading="loading"
            @click="check()"
          >
            密码校验
          </a-button>
        </a-col>
      </a-col>
      <a-col span="8"></a-col>
    </a-row>
    <a-row class="row">
      <a-col span="4" class="textone">新密码</a-col>
      <a-col span="12">
        <a-col span="20">
          <input
            v-model="newpossword"
            type="password"
            placeholder="输入新密码"
            class="input"
            id="newpsd"
            @click="change2('newpsd')"
            @blur="back2('newpsd')"
          />
        </a-col>
      </a-col>
      <a-col span="8" class="texttwo"/>
      <br>
      <a-col span="4"/>
      <div class="target">
        密码填写建议：长度不小于8位，且包含，大写英文字母、小写英文字母、数字和符号。点击隐藏密码。
      </div>
    </a-row>
    <br><br>
    <a-row class="row">
      <a-col span="4" class="textone">确认新密码</a-col>
      <a-col span="12">
        <a-col span="20">
          <input
            v-model="qrpossword"
            type="password"
            placeholder="再次输入新密码"
            class="input"
            id="qrpsd"
            @click="change2('qrpsd')"
            @blur="back2('qrpsd')"
          />
        </a-col>
      </a-col>
      <a-col span="8"></a-col>
    </a-row>
    <a-row>
      <a-col class="colbutton" span="20">
        <a-col span="20">
          <a-button @click="edit()" class="button">修改</a-button>
        </a-col>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { checkPassword, editPassword } from '@/api/manage'
export default {
  data () {
    return {
      qrpossword: '',
      password: '',
      oldpossword: '',
      newpossword: '',
      loading: false,
      icon: '',
      style: 'margin-left:10px'
    }
  },
  methods: {
    change2: function (e) {
      document.getElementById(e).type = ''
    },
    back2: function (e) {
      document.getElementById(e).type = 'password'
    },
    edit () {
      if (this.newpossword === this.qrpossword) {
        var pass = { id: (this.oldpossword + '%%%' + this.qrpossword).toString() }
        // console.log(pass)
        editPassword(pass).then((res) => {
          // console.log(res)
        })
      } else {
        // console.log('两次密码输入不同')
      }
    },
    check () {
      this.loading = true
      const Id = { id: this.oldpossword }
      checkPassword(Id).then((res) => {
        this.loading = false
        if (res.result === 'success') {
          this.icon = 'check-circle'
          this.style = 'margin-left:10px;color:green'
        } else {
          this.icon = 'close-circle'
          this.style = 'margin-left:10px;color:red'
        }
        // console.log(res)
      }).catch((res) => {
        this.loading = false
        this.icon = ''
      })
    }
  }
}
</script>

<style scoped>
.target{
  word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.div {
  background-color: #fff;
  width: 100%;
  height: 100%;
  padding-top: 15%;
  padding-bottom: 15%;
}
.input {
  border-width: 1px;
  height: 30px;
  width: 100%;
  border-radius: 5px;
  border: solid;
  border-color: rgba(233, 229, 229, 0.534);
}
.textone {
  padding-left: 100px;
  text-align: center;
  vertical-align: middle;
  word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

.texttwo {
  letter-spacing: 2px;
  margin-bottom: -100%;
  padding-left: 5px;
}

.row {
  height: 40px;
  line-height: 40px;
}

.colbutton {
  margin-top: 40px;
  text-align: center;
}
.button {
  padding: 5px;
  padding-left: 150px;
  padding-right: 150px;
}
/*.texttree{
margin: 100px;
} */
</style>
